<template>
    <div class="loginNav">
        <div class="login">
            <!-- <h2>天天在听音悦</h2> -->
            <div class="log">
                <div class="logBack">
                    <span class="iconfont icon-yinle"></span>
                </div>
            </div>    
            <h1>欢迎登录</h1>
            <div class="form">
            <div class="item">
                <span class="iconfont icon-zhanghao"></span>
                <input type="text" placeholder="手机号码" v-model="phone">
            </div>
            <div class="item">
                <span class="iconfont icon-yanzhengma"></span>
                <input type="password" placeholder="密码" v-model="password" @keydown.enter="getCellphoneFun">
                <!-- <button class="getCode" >发送</button> -->
            </div>
            <div class="item">
                <div class="submit" @click= "getCellphoneFun">登录</div>
                <!-- <div class="submit" @click="getCellphoneFun">提交</div> -->
            </div>
            </div>
            <div class="zbdl">
                <span @click="submitNologin">游客模式</span>
                <!-- <span >暂不登录</span> -->
            </div>
        </div>
    </div>
</template>

<script>
    import{getCellphone}from"../../api/base"
    import{Notify}from'vant';
    export default {
        data() {
            return {
                phone:"",
                password:""
            }
        },
        methods: {
            getCellphoneFun(){
                let reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|4|5|6|7|8|9])\d{8}$/;
                console.log(reg);
                if(!reg.test(this.phone)){
                    Notify({ type: 'warning', message: '请输入正确手机号码' });
                    return;
                }
                getCellphone({"phone":this.phone,"password":this.password}).then(data=>{
                    if (data.code == 200) {
                        Notify({ type: 'success', message: '登陆成功' }); 
                        this.$store.commit("userIdFun",data.account.id)
                        this.$store.commit("setLogin",true)
                        this.$router.push("/recommend") 
                    }else{
                        Notify({ type: 'warning', message: '请输入正确的密码' });
                        this.password = "";
                    }
                })
            },
            submitNologin(){
                this.$store.commit("setLogin",false)
                // this.$store.commit("useridFun")
                 this.$router.push("/recommend")  
            }
                
        }

    }
</script>

<style lang="less" scoped>
    .loginNav{
        height: 100%;
        width: 640px;
    }
    .login{
        background-image: linear-gradient(to left,skyblue,#B3C283);
        width: 100%;
        height: 100%;
        color: #fff;
        .log{
            text-align: center;
            height: 200px;
            line-height: 200px;
            .logBack{
                display: inline-block;
                height: 120px;
                line-height: 120px;
                width: 120px;
                background-color: RGBA(164,197,140,.3);
                border-radius: 50%;
                border: 2px solid #A4C68D;
                // padding-top:;
                margin-top: 50px;
                span{
                    margin: 0 auto;
                    font-size: 90px;
                    color: #FFF;
                }
            }

        }
        h1{
            font-size: 48px;
            text-align: center;
            height: 48px;
            padding: 100px 0  85px 0;
        }
        .form{
            .item{
                width: 76%;
                height: 60px;
                line-height: 60px;
                margin: 0 auto;
                background-color: #8EC7C1;
                border-radius: 30px;
                margin-bottom: 24px;
                input{
                    border: none;
                    outline: none;
                    text-indent: .5em;
                    background-color: transparent;
                    color: #fff;
                    font-size: 25px;
                    &::-webkit-input-placeholder{color: #fff;}
                }
                span{
                    font-size: 40px;
                    margin-left: 10px;
                    display: inline-block;
                    vertical-align: middle;
                }
                .icon-zhanghao{
                    color: aquamarine;
                }
                .getCode{
                    border: 1px solid #fff;
                    height: 40px;
                    width: 100px;
                    line-height: 40px;
                    text-align: center;
                    border-radius: 20px;
                    color: #d4473c;
                    background-color: #fff;
                }
                .submit{
                    // border: none;
                    cursor: pointer;
                    font-size: 30px;
                    background-color: #8EC7C1;
                    text-align: center;
                    border-radius: 30px;
                    color: #fff;
                }
            }
        }
        .zbdl{
            text-align: center;
            margin: 50px 0 0 0;
            span{
                text-decoration: underline;
                font-size: 25px;
            }
        }
    }

</style>